<template>
	<div class="gray">
		<div class="User_Wallet">
			<h3>我的钱包</h3>
			<i class="iconfont" v-if="xixi==undefined">&#xe62d;</i>
		</div>
		
		<div class="User_bottom" v-if="xixi==0">
			<ul>
				<li>
					<label><span>0</span>元</label>
					<p>
						<img src="../../../../public/qbimg/1.png" />
						<span>余额</span>
					</p>
				</li>
				<li>
					<label><span>7</span>张</label>
					<p>
						<img src="../../../../public/qbimg/2.png" />
						<span>优惠卷</span>
					</p>
				</li>
				<li>
					
					<label><span>0</span>个</label>
					<p>
						<img src="../../../../public/qbimg/3.png" />
						<span>游侠币</span>
					</p>
				</li>
			</ul>
		</div>
		
	</div>
</template>

<script>
	export default{
		name:'User_Wallet',
		data(){
			return{
				xixi:''
			}
		},
		created() {
			this.xixi=localStorage.hello
		}
	}
</script>

<style scoped>
	.gray{
		width: 100%;
		overflow: hidden;
		
	}
	.gray .User_Wallet{
		float: left;
		overflow: hidden;
		width: 100%;
		background-color: white;
	}
	.gray .User_Wallet h3{
		float: left;
		width: 50%;
		text-indent: 1rem;
		font-size: 1.2rem;
		line-height: 3rem;
		font-weight: bolder;
	}
	.gray .User_Wallet i{
		line-height: 3rem;
		float: right;
	}
	
	.gray .User_bottom{
		background-color: white;
		overflow: hidden;
		width: 100%;
	}

	.gray .User_bottom li{
		text-align: center;
		float: left;
		width: 33%;
		padding: 1rem 0;
	}
	.gray .User_bottom img{
		vertical-align: middle;/* 父元素必须是行内元素 */
		width: 1rem;
	}
	.gray .User_bottom label{
		display: block;
		font-weight: bolder;
		font-size: 0.5rem;
	}
	.gray .User_bottom label span{
		font-size: 1.2rem;
	}
	.gray .User_bottom p{
		display: initial;
		line-height: 2rem;
	}
	.gray .User_bottom p span{
		padding-top: 0.1rem;
	}
	
	
</style>
